<template>
  <div class="tip">
        <div class="talk">
            <h3>提交评论</h3>
            <p class="p"></p>
            <textarea placeholder="请输入评论内容" v-model="content" @keyup="clear"></textarea>
            <mt-button type="primary" size="large" @click="addData">发表</mt-button>
        </div>
        <div>
            <h3>评论列表</h3>
            <p class="p"></p>
            <div v-for="(x,index) in list" :key="index">
                <div class="title">
                    <span>第{{index+1}}楼</span>
                    <span>用户：{{x.user_name}}</span>
                    <span>发表时间:{{x.add_time | datefmate("YYYY-MM-DD HH:mm:ss")}}</span>
                </div>
                <ul class="mui-table-view">
			        <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
					        <div class="mui-media-body">
						        <p class='mui-ellipsis' v-text="x.content"></p>
					        </div>
				        </a>
			        </li>
		        </ul>
            </div>
            <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
        </div>
  </div>
</template>

<script>
    import apidoname from "../../kits/common.js";// 导入公共域名
    import { Toast } from 'mint-ui'; //导入mint-ui提示信息组件。
    //这里是将整个vue文件当作了子组件名称。
    export default { 
        props:['val'], //用来接收父组件传过来的值，这里的val就是父组件传过来的id值。
        data(){
            return {
                content: "",//用来存文本域的值.
                list: [], //用来存取从服务器请求回来的数据
                pageindex: 1 //用来计算页数
            }
        },
        created(){
            this.getData();//页面刚加载先获取数据
        },
        methods: {
            addData(){ //es6语法，函数，提交数据
                const url = apidoname.domainName + "/api/postcomment/" + this.val;//确定url地址
                this.$http.post(url,{content:this.content},{emulateJSON:true}).then(function(response){
                    if(this.content == ""){
                        Toast('不能为空，请从新输入');
                        return;
                    };
                    Toast('操作成功');
                    this.list = [{ //用户点击发布，将此条数据放在最上边。
                        user_name: "匿名用户",
                        add_time: new Date(),
                        content: this.content
                    }].concat(this.list);
                    this.content = "";//添加完成后将文本框中的值清空。
                });
            },
            getData(page){ //获取数据
                var page = page || 1;//防止用户不输入，默认为第一页数据。
                const url = apidoname.domainName + "/api/getcomments/" + this.val + "?pageindex=" + page; //确定获取的url地址
                this.$http.get(url).then(function(response){
                    this.list = this.list.concat(response.body.message);//获取数据时，将当前页面的数据和请求回来的数据进行拼接。
                });
            },
            getMore(){ //加载更多
                this.pageindex++; //实现页码增加。
                this.getData(this.pageindex);//从新获取数据
            },
            clear(){//将用户输入文本框中的空格清空。
                this.content = this.content.replace(/\s/g,"");
            }
        }
    }
</script>

<style scoped>
    .talk {
        padding: 5px;
    }
    .p {
        height: 1px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .title {
		margin: 20px 15px 10px;
		color: #6d6d72;
		font-size: 15px;
        background-color: rgba(0,0,0,0.1);
	}
</style>
